<template>
  <div class="index_one">
    <div class="container">
      <div class="title1 ta c0">在这里，你可以干什么</div>
      <div class="subtitle ta c0" v-if="token">
        通过在线和面对面活动结识与您有共同兴趣的新朋友。
      </div>
      <div class="subtitle ta c0" v-else>
        通过在线和面对面活动结识与您有共同兴趣的新朋友。可以
        <router-link to="/register">自由创建帐户</router-link>。
      </div>

      <ul class="clearfix row">
        <li class="ta col-md-4 col-sm-4">
          <div class="icon"><img src="../../img/img/icon1.png" alt="" /></div>
          <div class="name">查找活动</div>
          <div class="text">
            活动发生在你能想到的任何话题上，从在线游戏、摄影 到瑜伽和徒步旅行。
          </div>
        </li>
        <li class="ta col-md-4 col-sm-4">
          <div class="icon"><img src="../../img/img/icon2.png" alt="" /></div>
          <div class="name">加入团队</div>
          <div class="text">
            做你喜欢做的事，遇到喜欢它的人，找到你的社区。剩 下的都是历史了!
          </div>
        </li>
        <li class="ta col-md-4 col-sm-4">
          <div class="icon"><img src="../../img/img/icon3.png" alt="" /></div>
          <div class="name">创建团队</div>
          <div class="text">把人们聚集在一起，探索共同的兴趣爱好。</div>
        </li>
      </ul>

      <div class="ta">
        <div class="more ma">
          <router-link to="/dashboard" v-if="token">加入Jujuamici</router-link>
          <router-link to="/login" v-else>加入Jujuamici</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      token: ''
    };
  },
  methods: {},
  mounted() {
    this.token = window.localStorage.getItem("token");
  }
};
</script>

<style scoped lang="less">
.index_one {
  background-color: #f7f8fa;
  padding: 3.75rem 0;

  ul {
    margin: 3.4375rem -4.1875rem 0;

    li {
      padding: 0 4.1875rem;

      img {
        transition: all 0.4s;
        -webkit-transform: all 0.4s;
        -moz-transition: all 0.4s;
        -o-transition: all 0.4s;
      }
    }

    .name {
      font-size: 1.125rem;
      font-weight: 600;
      margin: 1.5625rem 0 0.25rem;
      line-height: 2.125rem;
      color: #000000;
    }

    li:hover {
      .name {
        color: #4c8bf5;
      }

      img {
        transform: rotateY(180deg);
        transition: all 0.4s;
        -webkit-transform: all 0.4s;
        -moz-transition: all 0.4s;
        -o-transition: all 0.4s;
      }
    }
  }

  .more {
    margin-top: 3.75rem;
  }
}

@media (max-width: 990px) {
  .index_one ul li {
    padding: 0 15px;
  }
  .index_one ul {
    margin-left: -15px;
    margin-right: -15px;
  }
  .index_one .more {
    margin-top: 20px;
  }
}

@media (max-width: 767px) {
  .index_one ul li {
    margin-bottom: 15px;
  }
  .index_one ul li:last-child {
    margin-bottom: 0;
  }
  .index_one ul {
    margin-top: 20px;
  }
  .index_one {
    padding: 25px 0;
  }
}

</style>
